<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar">
			<view class="top_view"></view>  
		</view>  
		<!-- #endif --> 	
		<uni-nav-bar  fixed="true" left-icon="false" :status-bar="true" :border="false" >
			<view class="NavBox flex">
				<view class="Navsearch flex" @click="Tosearch()">
					<!-- <image style="width: 100%;" src="../../../static/images/search2.png" mode="widthFix"></image> -->
					</view>
				<view class="flex ListBox">
					<view class="NavList"  v-for="(item,index) in NavList" :key="index" @click="TabNav(index)">
						<text :class="num==index?'choice':''">{{item}}</text>
					</view>
				</view>
				<view class="Navsearch"></view>
			</view>
			
		</uni-nav-bar>
	
		<view v-if="num==2&&MyFollowList.length" class="" style="margin: 10rpx 20rpx;">
			<view class="flex" style="justify-content:start;"><text class="spot"></text>正在直播</view>
			<view class="flex2">
				<view class="anchorBox" v-for="(item,index) in MyFollowList" :key="index" @click="ToTv(item.room_id,item.room_number,item.play_url,item.member_name,item.member_id,item.identity,item.status,item)"> 
					<view class="anchor">
						<image class="portrait" :src="item.member_avatar" mode=""></image>
						<image class="ListIco" src="../static/images/Ico.png" mode=""></image>
					</view>
					<view class="anchorName">{{item.member_name}}</view>
				</view>
				
			</view>
		</view>
		
		<view v-if="num!=2" class="">
			<view class="classList">
				<view :class ="[(NavNum == 'aaa') ? 'active2':'']" @click="NavBtn('aaa','')"  class="searchBLi">
					<text>全部</text>
				</view>
				<view :class ="(NavNum == index) ? 'active2':''" @click="NavBtn(index,item.gc_id)"  class="searchBLi" v-for="(item,index) in ClassList" :key="index">
					<text>{{item.gc_name}}</text>
				</view>
			</view>
			<view class="" v-if="adv_list[0]">
				<view class="Banner" v-if="adv_list[0].adv_pic">
					<image style="width: 100%;" :src="adv_list[0].adv_pic" mode="widthFix"></image>
				</view>
			</view>
			<view class="rolltext" v-if="ap_intro">
				<uni-notice-bar  showIcon="true" :speed="50" scrollable="true" background-color="#FF3355" color="#fff" single="true" :text="ap_intro"></uni-notice-bar>
			</view>
		</view>
	
		<view class="TvBox flex wrap">
			<view class="TvList" v-for="(item,index) in TvList" :key="index" @click="ToTv(item.room_id,item.room_number,item.play_url,item.member_name,item.member_id,item.identity,item.status,item)">
				<view class="BgImg"><image style="width: 100%;height: 100%;" :src="item.room_cover" mode=""></image></view>
				<view class="audience flex">
					<view class="" v-if="item.status==0"><text class="spot"></text>回放</view>
					<view class="" v-if="item.live_booking_time.length > 2"><text class="spot"></text>预告</view>
					<view class="spot2 flex" v-else-if="item.status==1"> <image style="height: 36rpx;" src="../static/images/Ico.png" mode="heightFix"></image> <text class="">直播中</text></view>
					<view class="visitNum"><image style="width: 30rpx;" src="../static/images/audienceIco.png" mode="widthFix"></image> {{item.visits}}</view>
				</view>
				<view class="Info flex">
					<view class="ImgBox">
						<image style="width: 60rpx;" :src="item.member_avatar||'@/static/images/108.png'" mode="widthFix"></image>
					</view>
					<view style="width: 230rpx;">
						<view class="Title">{{item.room_title}}</view>
						<view class="texthide">{{item.nickName||item.member_name}}</view>
					</view>
					
				</view>
			</view>
		</view>
	
		
		
		
		<view  v-if="TvList.length<=0">
			<image style="width: 100%;"  :src="`${picUrl}/InfoNull.png`" mode="widthFix"></image>
		</view>
		<tab-bar :num="0"></tab-bar>
	</view>
</template>

<script>
	import TabBar from '../TabBar/TabBar'
	export default {
		components:{TabBar},
		data() {
			return {
				NavList:["最新","热门","关注"],
				num:0,
				NavNum:"aaa",
				curpage:1,
				TvList:"",
				ClassList:"",
				class_id:"",
				MyFollowList:'',
				adv_list:"",
				animation:"",
				animationData:"",
				ap_intro:"",
				// List:["ssss","aaaa","ssss"]
			}
		},
		onLoad() {
			this.getTvList();
			this.liveIndexAdv()
			this.MyFollow()
			this.getClass();
		},
		onReachBottom(e) {
			if(this.curpage){
				this.getTvList(true)
			}else{
				uni.showToast({
					title:"到底了哦~~",
					icon:"none"
				})
			}
		},
		onPullDownRefresh() {
			this.curpage=1
			this.getTvList()
			//this.liveIndexAdv()
			//this.MyFollow()
			//this.getClass();
			setTimeout(function () {
				uni.stopPullDownRefresh();  //停止下拉刷新动画
			}, 1000);
		},
		
		onShow() {
			var animation = uni.createAnimation({
				duration: 1300,
				timingFunction: 'ease',
			})
			this.animation = animation
		},
		methods: {
			
			rotateAndScale() {
			    // 定义动画内容
				this.animation.translateX(200).step()
			    this.animation.translateX(0).step({duration:0})
			    this.animationData = this.animation.export()
			},
			
			
			Tosearch(){
				uni.navigateTo({
					url:"/live/search/list"
				})
			},
			liveIndexAdv(){//获取广告图
				this.$util.request({
					url: '/live/index.php?act=api-live&op=liveIndexAdv',
					method: 'get',
					data: {},
				}).then((res)=>{
					console.log(res)
					if (res.error_code == 0) {
						this.adv_list=res.datas.adv_list
						this.ap_intro = res.datas.adv_list[0].ap_intro
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						}); 
					}
				})
			},
			MyFollow(){
				this.$util.request({
					url: '/live/index.php?act=api-live&op=getMyFollowLiveList',
					method: 'get',
					data: {},
				}).then((res)=>{
					if (res.error_code == 0) {
						this.MyFollowList=res.datas.list
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						});
					}
				})
			},
			getClass(){
				this.$util.request({
					url: '/live/index.php?act=api-live&op=index',
					method: 'get',
					data: {},
				}).then((res)=>{
					if (res.error_code == 0) {
						this.ClassList=res.datas.class_list
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						});
					}
				})
			}, 
			getTvList(state){
				this.$util.request({
					url: '/live/index.php?act=api-live&op=getLiveList',
					method: 'get',
					data: {
						curpage:this.curpage,
						orderStr:this.num==0?"new":"visits",
						is_my_follow:this.num==2?"1":"0",
						class_id:this.class_id,
					},
				}).then((res)=>{
					if (res.error_code == 0) {
						if(state){
							this.TvList= this.TvList.concat(res.datas.list) 
						}else{
							this.TvList=res.datas.list
						}
						if(res.datas.paged.hasmore){
							this.curpage++
						}else{
							this.curpage=false
						}
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						});
					}
				})
			},
			ToTv(room_id,room_number,play_url,member_name,member_id,identity,status,item){
				if(item.live_booking_time.length > 2){
					uni.navigateTo({
						url:"/live/live/Notice?item=" + JSON.stringify(item)
					})
					return false
				}
				play_url=play_url||"http://play.ehmall.com.cn/live/1400424696_"+member_id+"_"+identity+"_main.flv"
				uni.setStorageSync("flv",play_url)
				uni.setStorageSync("room_number",room_number)
				uni.setStorageSync("room_id",room_id)
				uni.navigateTo({
					url:"/live/live/details?room_id="+room_id+"&room_number="+room_number+'&flv='+play_url+'&live_member_name='+member_name+"&identity="+identity+"&status="+status
				})
			},
			NavBtn(index,class_id){
				this.curpage=1
				this.NavNum=index
				this.class_id=class_id
				this.getTvList()
			},
			TabNav(index){
				this.curpage=1
				this.num=index
				// if(index!=2){
				// 	this.liveIndexAdv()
				// }
				this.getTvList()
			}
		}
	}
</script>

<style scoped>
	.ImgBox{
		border-radius: 50%;
		width: 60rpx;
		height: 60rpx;
		overflow: hidden;
		border: 1rpx solid #EEEEEE;
	}
	.texthide{
		font-size: 24rpx;
		width: 100%;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	.status_bar {
	    height: var(--status-bar-height);  
	    width: 100%;  
	    background-color: #FFFFFF;
	}  
	.top_view {  
	    height: var(--status-bar-height);  
	    width: 100%;  
	    position: fixed;  
	    background-color: #FFFFFF; 
	    top: 0;  
	    z-index: 999;  
	}
	.spot{
		display: inline-block;
		width: 15rpx;
		height: 15rpx;
		background-color: #E82B57;
		margin-right: 10rpx;
		border-radius: 50%;
	}
	.spot2{
		background-color:#FFFFFF;
		padding-right:10rpx;
		line-height: 36rpx;
		/* border:3rpx solid #E82B57; */
		border-radius: 20rpx;
		font-size: 24rpx;
		color:#E82B57;
	}
	.spot2 image{
		border-radius: 50%;
	}
	.Banner{
		margin:0 20rpx;
		/* border-radius: 20rpx; */
		overflow: hidden;
		height: 320rpx;
	}
	.active2{
		background-color: #E82B57;
		color: #FFF9FC;
		line-height: 40rpx !important;
		border-radius: 20rpx;
	}
	.searchBLi{
		display: inline-block;
		padding: 0 15upx;
		font-size: 31upx;
		line-height:80rpx
	}
	.classList{
		box-sizing: border-box;
		width: 100%;
		overflow-x: scroll;
		overflow-y: hidden;
		white-space: nowrap;
		line-height: 80rpx;
		height: 80rpx;
		padding: 0 12px;
		color: #333;
	}
	.Info .Title{
		font-weight: bold;
		color:#000;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		width: 100%;
	}
	.Info{
		/* position: absolute;
		bottom: 0; */
		z-index: 10;
		width: 100%;
		font-size: 36rpx;
		padding:5rpx 10px;
		/* color: #FFFFFF; */
		box-sizing: border-box;
	}
	
	.audience{
		position: absolute;
		top: 0;
		z-index: 10;
		width: 100%;
		padding:5rpx 10px;
		color: #FFFFFF;
		box-sizing: border-box;
	}
	.visitNum{
		position: absolute;
		bottom: -230rpx;
		right: 20rpx;
	}
	.BgImg{
		width: 345rpx;
		height: 276rpx;
		overflow: hidden;
		/* position: absolute;
		top: 0;
		left: 0; */
		z-index: 5;
	}
	.BgImg img{
		
	}
	
	.TvList{
		width: 345rpx;
		height: 380rpx;
		/* border-radius: 20rpx; */
		overflow: hidden;
		/* border:1rpx solid #EEEEEE; */
		margin-bottom: 20rpx;
		position: relative;
		box-shadow: 5rpx 5rpx 5rpx #EEEEEE,-5rpx -5rpx 5rpx #EEEEEE;
		border-radius: 20rpx;
	}
	.TvBox{
		margin: 20rpx;
	}
	.anchorBox{
		width: 110rpx;
		margin: 0 16rpx;
	}
	.anchorName{
		color: #000000;
		text-align: center;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	.anchor{
		position: relative;
		width: 110rpx;
	}
	.anchor .ListIco{
		width: 35rpx;
		height: 35rpx;
		position: absolute;
		bottom: 0;
		right: 0;
		border-radius: 50%;
	}
	.portrait{
		width: 110rpx;
		height: 110rpx;
		border: 1rpx solid #EEEEEE;
		border-radius: 50%;
	}
	.ListBox{
		width:500rpx;
		/* #ifdef MP-WEIXIN */
			width:350rpx;
		/* #endif */
	}
	.NavList{
		font-size: 36rpx;
		color: #000000;
		width: 50%;
		text-align: center;
	}
	.NavBox{
		/* margin-top: 20rpx; */
		margin-left: -160rpx;
		font-weight: bold;
	}
	.Navsearch{
		width: 40rpx;
		height: 40rpx;
		overflow: hidden;
		margin-left: 80rpx;
	}
	.choice{
		border-bottom: 4rpx solid #E82C58;
	}
	page{
		background-color: #FFFFFF;
	}
	.flex{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.flex2{
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
	.wrap{
		flex-wrap: wrap;
	}
</style>
